import React   from 'react';
// 父子组件
class App extends React.Component {

  render() {
    return (
      <div>
        {/* 类组件 */}
        <Navbar title="导航"></Navbar>

        {/* 函数式组件 */}
        <Sidebar bg="red" position="left"></Sidebar>
      </div>
    );
  }

}

//  子组件class
class Navbar extends React.Component {
  //属性是父组件传来的，this.props
  render() {
    // console.log(this.props)
    let { title, leftshow } = this.props;
    return (
      <div>
        {leftshow && <button>返回</button>}
        navbar-{title}
        <button>home</button>
      </div>
    );
  }
}

// 函数组件
function Sidebar(props) {
  return (
    <div style={{ background: props.bg }}>
      <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
      </ul>
    </div>
  );
}
export default App;